import ImgBox from "../../components/Common/ImgBox";
import StatisticalChart from "../../components/Business/StatisticalChart";
import BadgeLeft from "../../components/Common/BadgeLeft";
import $ from 'jquery'

import { baseURL } from '../../utils/ipConfig'
var echarts2 = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/map/js/china");

export default {
    name: "National",
    components: {
        ImgBox,
        StatisticalChart,
        BadgeLeft,
    },
    data() {
        return {
            reports: {},
            excellents: {},
            differences: {},
            nbiots: {},
            situationtitle: "全网",
            activeName: "whole",
            touchTest: false,
            startTime: "",
            endTime: "",
        };
    },
    beforeMount() {
    },
    mounted() {
        this.item();
    },
    methods: {
        item() {
            let _this = this;
            let params = new URLSearchParams()
            params.append("startTime", "2021110110")
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        let hours = [];
                        resData.data.forEach((item) => {
                            // 日期
                            hours.push(item.hour);
                        });
                        _this.endTime = hours[hours.length - 1];
                        _this.mapChart();
                        _this.getDataList();
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
        },
        // 进入页面表格加载
        getDataList() {
            let _this = this;


            let param = new URLSearchParams()
            param.append('endTime', _this.endTime)
            param.append('startTime', _this.endTime)
            param.append('cityCode', "0851")
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        for (var i = 0; i < resData.data.length; i++) {
                            if (resData.data[i].dataType == "全国") {
                                // _this.reports = resData.data[i].data;
                                if (resData.data[i].data !== null) {
                                    _this.reports = resData.data[i].data;
                                } else {
                                    _this.reports = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                            else if (resData.data[i].dataType == "4G") {
                                if (resData.data[i].data !== null) {
                                    _this.excellents = resData.data[i].data;
                                } else {
                                    _this.excellents = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else if (resData.data[i].dataType == "2G") {
                                if (resData.data[i].data !== null) {
                                    _this.differences = resData.data[i].data;
                                } else {
                                    _this.differences = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else {
                                if (resData.data[i].data !== null) {

                                    _this.nbiots = resData.data[i].data;
                                } else {
                                    _this.nbiots = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                        }
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
            // _this.$ajax
            //     .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`)
            //     .then(function (res) {
            //         //请求成功
            //         let resData = res.data;
            //         if (resData.code == 200) {
            //             let hours = [];
            //             resData.data.forEach((item) => {
            //                 // 日期
            //                 hours.push(item.hour);
            //             });
            //             _this.foot = hours[hours.length - 1];
            //             let param = new URLSearchParams()
            //             param.append('endTime', _this.foot)
            //             param.append('startTime', _this.foot)
            //             param.append('cityCode', "0851")
            //             _this.$ajax
            //                 .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
            //                 .then(function (res) {
            //                     //请求成功
            //                     let resData = res.data;
            //                     if (resData.code == 200) {
            //                         for (var i = 0; i < resData.data.length; i++) {
            //                             if (resData.data[i].dataType == "全国") {
            //                                 _this.reports = resData.data[i].data;
            //                             }
            //                             else if (resData.data[i].dataType == "4G") {
            //                                 _this.excellents = resData.data[i].data;
            //                             } else if (resData.data[i].dataType == "2G") {
            //                                 _this.differences = resData.data[i].data;
            //                             } else {
            //                                 if (resData.data[i].data !== null) {

            //                                     _this.nbiots = resData.data[i].data;
            //                                     }
            //                             }
            //                         }
            //                     } 
            //                 })
            //                 .catch(function (error) {
            //                     //请求失败
            //                     console.log(error);
            //                 });
            //         } 
            //     })
            //     .catch(function (error) {
            //         //请求失败
            //         console.log(error);
            //     });
        },
        // 返回全省视图
        backMap() {
            this.mapChart();
        },
        // 地图以及点击事件
        mapChart() {
            let myChart = echarts2.init(document.getElementById("national_map"));
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            showCitys("520100", "贵阳市")
            function initEcharts(map) {
                myChart.setOption({
                    roam: true,
                    visualMap: {
                        type: "piecewise",
                        right: 5,
                        bottom: 15,
                        min: 0, // 最小值
                        max: 10000000, // 最大值
                        splitList: [
                            {
                                gte: 1000000,
                                color: "#ADCAFF",
                                label: "100万以上",
                            },
                            {
                                gte: 800000,
                                lte: 1000000,
                                color: "#80ADFF",
                                label: "80万~100万",
                            },
                            {
                                gte: 500000,
                                lte: 800000,
                                color: "#2474FF",
                                label: "50万~80万",
                            },
                            {
                                gte: 300000,
                                lte: 500000,
                                color: "#0644B1",
                                label: "30万~50万",
                            },
                            {
                                lte: 300000,
                                color: "#001856",
                                label: "30万以下",
                            },
                        ],
                    },
                    tooltip: {
                        show: true,
                        trigger: "item",
                        formatter: "{b}-活跃用户数：{c}",
                    },
                    geo: {
                        map: map,
                        scaleLimit: {
                            min: 1.2,
                            max: 3
                        },
                        zoom: 1.2,
                        //图形上的文本标签，可用于说明图形的一些数据信息
                        label: {
                            normal: {
                                show: true,
                                fontSize: "17",
                                color: "rgba(0,0,0,0.7)",
                                fontWeight: 500,
                            }
                        },
                        //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
                        itemStyle: {
                            //normal 是图形在默认状态下的样式；
                            normal: {
                                borderWidth: 2, //设置外层边框
                                borderColor: '#0B79A6',
                                shadowColor: "#0B79A6"
                            },
                            //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            emphasis: {
                                areaColor: "#82d6fad3",
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                shadowBlur: 30,
                                borderWidth: 2,
                                shadowColor: "#0B79A6"
                            }
                        }
                    },
                    series: [
                        {
                            type: "map",
                            mapType: map,
                            geoIndex: 0,
                            // data: dataList
                            itemStyle: {
                                normal: {
                                    // areaColor: '#000',
                                    // borderColor: '#a18a3a',
                                    // borderWidth: 10
                                },
                                emphasis: {
                                    show: false,
                                    areaColor: null
                                }
                            },
                        }
                    ]
                }, true);
            }
            // 县
            // var countyMap = {
            //     // 遵义市（15）
            //     播州区: "520304",
            //     桐梓县: "520322",
            //     道真仡佬族苗族自治县: "520325",
            //     务川仡佬族苗族自治县: "520326",
            //     凤冈县: "520327",
            //     余庆县: "520329",
            //     习水县: "520330",
            //     赤水市: "520381",
            //     仁怀市: "520382",
            //     汇川区: "520303",
            //     红花岗区: "520302",
            //     正安县: "520324",
            //     湄潭县: "520328",
            //     绥阳县: "520323",
            //     // 铜仁市（10）
            //     沿河土家族自治县: "520627",
            //     松桃苗族自治县: "520628",
            //     碧江区: "520602",
            //     万山区: "520603",
            //     玉屏侗族自治县: "520622",
            //     江口县: "520621",
            //     石阡县: "520623",
            //     思南县: "520624",
            //     德江县: "520626",
            //     印江土家族苗族自治县: "520625",
            //     // 黔东南苗族侗族自治州(16)
            //     黄平县: "522622",
            //     施秉县: "522623",
            //     镇远县: "522625",
            //     岑巩县: "522626",
            //     三穗县: "522624",
            //     天柱县: "522627",
            //     锦屏县: "522628",
            //     黎平县: "522631",
            //     从江县: "522633",
            //     榕江县: "522632",
            //     雷山县: "522634",
            //     丹寨县: "522636",
            //     麻江县: "522635",
            //     凯里市: "522601",
            //     台江县: "522630",
            //     剑河县: "522629",
            //     // 黔南布依族苗族自治州(12)
            //     瓮安县: "522725",
            //     福泉市: "522702",
            //     贵定县: "522723",
            //     都匀市: "522701",
            //     三都水族自治县: "522732",
            //     荔波县: "522722",
            //     独山县: "522726",
            //     平塘县: "522727",
            //     罗甸县: "522728",
            //     长顺县: "522729",
            //     惠水县: "522731",
            //     龙里县: "522730",
            //     // 贵阳市
            //     清镇市: "520181",
            //     修文县: "520123",
            //     息烽县: "520122",
            //     开阳县: "520121",
            //     乌当区: "520112",
            //     南明区: "520102",
            //     花溪区: "520111",
            //     观山湖区: "520115",
            //     白云区: "520113",
            //     云岩区: "520103",
            //     小河区: "520103",
            //     // 
            //     // 三都水族自治县: "520382",
            //     // 三都水族自治县: "520382",
            //     // 三都水族自治县: "520382",
            //     // 三都水族自治县: "520382",
            //     // 三都水族自治县: "520382",
            // };

            var that = this;
            //展示对应市
            function showCitys(cName, param) {
                // console.log(cName, param)
                $.getJSON(`map/city/${cName}.json`, data => {
                    that.$echarts.registerMap(param, data);
                    initEcharts(param);
                    // return mapData;
                })
            }
            //展示对应县
            // function showCountys(cName, param) {
            //     // console.log(cName, param)
            //     $.getJSON(`/map/county/${cName}.json`, data => {
            //         that.$echarts.registerMap(param, data);
            //         initEcharts(param);
            //     })
            // }
        },
        // 页面切换
        handleClick(tab, event) {
            if (this.activeName == "whole") {
                this.situationtitle = "全网";
                this.touchTest = !this.touchTest;
            } else if (this.activeName == "situation_2G") {
                this.situationtitle = "2G";
                this.touchTest = !this.touchTest;
            } else if (this.activeName == "situation_4G") {
                this.situationtitle = "4G";
                this.touchTest = !this.touchTest;
            } else {
                this.situationtitle = "NB-IOT";
                this.touchTest = !this.touchTest;
            }
        },
    },
};